<template>
  <div class="article-wrapper">
    <div class="article-top-wrapper">
      <!--标题，发布时间 | 最后修改时间，标签，收藏，点赞 -->
      <h2 class="title">{{ title }}</h2>
      <div class="info-wrapper">
        <span>👁‍🗨浏览：{{ readCount }}</span>
        <span>👍点赞：{{ star }}</span>
        <span>💖收藏：{{ favorite }}</span>
        <span>⏱发布时间：{{ publishDate }}</span>
        <span v-if="lastEditDate">✍最后修改：{{ lastEditDate }}</span>
        <div class="tags-wrapper">
          <el-tag>tag1</el-tag>
          <el-tag>tag2</el-tag>
          <el-tag>tag2</el-tag>
        </div>
      </div>
    </div>
    <!-- 正文内容 -->
    <v-md-preview ref="preview" :text="content" class="article-content-wrapper"></v-md-preview>
  </div>
</template>

<script>
export default {
  name: 'ArticleDetails',
  props: {
    // id: { type: String, default: "" },
    author_id: { type: String, default: "" },
    title: { type: String, default: "" },
    desc: { type: String, default: "" },
    content: { type: String, default: "" },
    coverUrl: { type: String, default: "" },
    star: { type: Number, default: 0 },
    favorite: { type: Number, default: 0 },
    readCount: { type: Number, default: 0 },
    publish: { type: Boolean, default: true },
    createDate: { type: String, default: "" },
    publishDate: { type: String, default: "" },
    lastEditDate: { type: String, default: "" },
    tags: { type: Array, default: () => [] },
    category: { type: Object, default: () => ({}) },
  },
  data() {
    return {
      preview: null,
    }
  },
  mounted() {
    this.preview = this.$refs.preview
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
.article-wrapper {
  .article-top-wrapper {
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--el-border-color-light);

    .title {
      font-size: 26pt;
      margin: 4px 0 10px 0;
    }

    .info-wrapper {
      &>span {
        display: inline-block;
        padding-right: 14px;
        font-size: 11pt;
        color: var(--el-text-color-secondary);
      }
    }

    .tags-wrapper {
      margin-top: 12px;

      .el-tag {
        margin-right: 8px;
      }
    }
  }

  .article-content-wrapper {
    font-size: 14pt;

    // padding : 10px 0;
    &:deep(.github-markdown-body) {
      padding: 10px;
    }
  }
}
</style>